<template>
  <div>
    <div>测试v-for, 循环数据</div>
    <div>
      <ul style="list-style-type: none">
        <!-- item是数组里面的元素  index是数组的下标 -->
        <!-- :key用来绑定key值，不写的话也可用，但是eslint会报错 -->
        <li :key="item.name" v-for="(item, index) in list">
          {{ index }}-{{ item.name }}-{{item.age}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "v-for",
  data() {
    return {
      list: [
        {name: "Gran", age: 25}, 
        {name: "Anabelle", age: 23}, 
        {name: "Anna Strenger", age: 45}, 
        {name: "Cirilla", age: 54}],
    };
  },
  methods: {
    change() {
      this.xxx = "222";
    },
  },
};
</script>
